<!--
 * @Author: your name
 * @Date: 2017-08-04 15:54:18
 * @LastEditTime: 2019-12-13 17:35:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /courseware_echarts/06/step2.html
 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="../bootstrap.min.css">
  <style>
    body {
      padding-top: 80px;
    }

    #add-btn {
      margin-top: 20px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-md-3 col-md-offset-3">
        <form class="form-horizontal">
          <input id="place-input" type="text" class="form-control" value="" placeholder="请输入地址">
          <button type="button" id="search-btn" class="btn btn-success">
            查询
          </button>
        </form>

      </div>
      <div class="col-md-6">
        <div id="main" style="height:500px;"></div>
      </div>
    </div>
  </div>



  <script src='../jquery.min.js'></script>
  <script src='../echarts.min.js'></script>
  <script src='../china.js'></script>
  <script>
    $(function () {
      drawMap()
      var key = 'tQGf0UzCs5CXwcXLBHT4U5HB0sw2EmdA'
      var myChart = echarts.init(document.getElementById('main'))
      var chartData = []
      var url =
        `http://api.map.baidu.com/geocoding/v3/?output=json&ak=${key}&callback=?&address=`
      var ePlaceInput = $('#place-input')
      var eSearchBtn = $('#search-btn')
      // http://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output=json&ak=您的ak&callback=showLocation 
      eSearchBtn.click(function () {
        var name = ePlaceInput.val()
        $.getJSON(url + name).then(function (res) {
          console.log(res)
        })
      })

      function drawMap() {
        // 使用刚指定的配置项和数据显示图表。
        var option = {
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#323c48',
                borderColor: '#111'
              },
              emphasis: {
                areaColor: '#2a333d'
              }
            }
          },
        }
        myChart.setOption(option);

      }
    })
  </script>
</body>

</html>